<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="../app/js/util.js"></script>
    <script src="https://6c6f-lowcode-4gj2yio295db4d6b-1313839769.tcb.qcloud.la/weda-resource/js/vue.js"></script>
    <script src="https://6c6f-lowcode-4gj2yio295db4d6b-1313839769.tcb.qcloud.la/weda-resource/js/jquery-3.3.1.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <template>
        <div>
            <el-form ref="login" label-width="100px" label-position="left" size="mini" class="login-form"
                     :model="login"
                     :rules="rules">

                <h4>登录</h4>

                <div class="loginWay">
                    <el-radio-group size="mini" v-model="loginWay">
                        <el-radio-button :label="true">邮箱</el-radio-button>
                        <el-radio-button :label="false">手机</el-radio-button>
                    </el-radio-group>
                </div>

                <el-form-item v-if="loginWay" label="邮箱" prop="email">
                    <el-input type="email" maxLength="64" placeholder="请输入" v-model="login.email"></el-input>
                </el-form-item>

                <el-form-item v-if="!loginWay" label="手机" prop="phone">
                    <el-input type="phone" maxLength="64" placeholder="请输入" v-model="login.phone"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" maxLength="64" placeholder="请输入" v-model="login.password"
                              autocomplete="off"></el-input>
                </el-form-item>

                <div class="button">
                    <el-button @click="submitForm">登录</el-button>
                </div>

                <div style="text-align: center; margin-top: 20px">
                    <a href="./register.html" style="color: white">注册</a>
                </div>

            </el-form>
        </div>
    </template>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loginWay: true,
                login: {
                    email: null,
                    phone: null,
                    password: null
                },
                rules: {
                    email: [{
                        required: true,
                        message: '该项为必填项',
                        trigger: 'blur'
                    }, {
                        type: 'email',
                        message: '请输入正确格式的邮箱',
                        trigger: 'blur'
                    }],
                    phone: [{
                        required: true,
                        message: '该项为必填项',
                        trigger: 'blur'
                    }, {
                        pattern: /^1[3-9][0-9]{9}$/,
                        message: '请输入正确格式的手机号',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '该项为必填项',
                        trigger: 'blur'
                    }, {
                        pattern: /^[a-zA-Z0-9]{1,64}$/,
                        message: '请输入正确格式的密码（密码又1-64位数字和字母组成）',
                        trigger: 'blur'
                    }]
                }
            };
        },
        methods: {
            submitForm() {
                this.$refs['login'].validate(async valid => {
                    if (!valid) {
                        this.$message.error('检验失败');
                        return false;
                    }
                    try {
                        const data = JSON.parse(JSON.stringify(this.login));
                        this.loginWay ? delete data.phone : delete data.email;
                        const result = await myFetch('http://localhost:1628/production/controller/auth/Login', data);
                        const body = await result.json();
                        if (body.data) {
                            this.$message.success('登录成功');
                            setTimeout(() => {
                                window.location.replace('../app/html/index.html');
                            }, 1500);
                            return;
                        }
                        this.$message.error('登录失败：' + body.errorMessage);
                    } catch (err) {
                        console.error(err);
                        this.$message.error('请求失败');
                    }
                });
            },
            registerForm() {
                window.location.href = './register.html';
            }
        }
    })
</script>
<style>
    html {
        width: 100%;
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        position: fixed;
        background: url('../app/resource/背景.png') no-repeat;
        background-size: cover;
    }

    .login-form {
        width: 400px;
        height: max-content;
        top: 50%;
        left: 50%;
        opacity: 0.65;
        position: absolute;
        padding: 50px 30px;
        padding-top: 20px;
        border-radius: 20px;
        background-color: #000000;
        transform: translate(-50%, -50%);
        box-shadow: #000000 0px 0px 10px;
    }

    .login-form > h4 {
        color: white;
        text-align: center;
    }

    .loginWay {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }

    .button {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }

    .button > button {
        width: 200px;
        height: auto;
        color: white;
        background-image: linear-gradient(to right, #30cfd0, #330867);
    }
</style>
</body>
</html>